<style scoped>
.login_page {
  width: 100%;
  height: 100%;
  position: absolute;
}

img {
  width: 100%;
  height: 100%;
}

.login_form_box {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login_form {
  width: 350px;
  background-color: rgba(244, 244, 245, 0.8);
  padding: 10px 50px;
  border-radius: 10px;
}

.login_form_text {
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: 21px;
}

.login_form_btn {
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>
<template>
  <div class="login_page">
    <img src="/login_page.jpg" alt="">
    <div class="login_form_box">
      <div class="login_form">
        <el-form
            label-width="auto"
            :model="loginInfo"
        >
          <el-form-item>
            <div class="login_form_text">
              用户登录
            </div>
          </el-form-item>
          <el-form-item
              label="用户名:"
          >
            <el-input
                v-model="loginInfo.userName"
                placeholder="请输入用户名"
            />
          </el-form-item>
          <el-form-item
              label="密码:"
          >
            <el-input
                type="password"
                v-model="loginInfo.password"
                placeholder="请输入密码"
                show-password
            />
          </el-form-item>
          <el-form-item
          >
            <div class="login_form_btn">
              <el-button
                  @click="login_btn"
              >登录
              </el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {Ref, ref} from "vue";
import {useCounterStore} from '@/stores/counter.js'
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";
import {loginPost} from "@/axios/api";

const counterStore = useCounterStore()
const router = useRouter()
interface ILoginInfo {
  userName: string,
  password: string
}

const loginInfo: Ref<ILoginInfo> = ref({
  userName: "",
  password: ""
})

function login_btn() {
  loginPost(loginInfo.value).then(data => {
    counterStore.userName=loginInfo.value.userName
    if (data.data.message == "成功") {
      counterStore.token = data.data.data
      router.push({
        path: '/home'
      })
    } else {
      ElMessage.error("登录失败")
    }
  })
}
</script>